import { Switch, Route, Redirect, withRouter } from 'react-router-dom'

// 引入组件
import Home from '../pages/Home'
import NotFound from '../pages/NotFound'
import Register from '../pages/Register'
import PhoneLogin from '../pages/PhoneLogin'
import Login from '../pages/Login'
import GoodsInfo from '../pages/GoodsInfo'
import Cart from '../views/Cart'


// 设置路由配置规则
const routes = [
    // 路径的重定向
    {
        path: '/',//路径
        redirect: '/home',//重定向
        exact: true,//是否启用精准匹配
    },
    // 配置首页规则
    {
        path: '/home',//路径
        component: Home,//路径对应的组件
        exact: false,//是否启用精准匹配
        isLogin: false,//是否需要做登录验证
        meta: { title: '首页' },//自定义设置路由元信息
        redirect: '/home/goods'
    },
    {
        path: '/register',//路径
        component: Register,//路径对应的组件
        exact: true,//是否启用精准匹配
        isLogin: false,//是否需要做登录验证
        meta: { title: '注册' },//自定义设置路由元信息
    },
    {
        path: '/phonelogin',//路径
        component: PhoneLogin,//路径对应的组件
        exact: true,//是否启用精准匹配
        isLogin: false,//是否需要做登录验证
        meta: { title: '手机登录' },//自定义设置路由元信息
    },
    // 配置登录规则
    {
        path:'/login',//路径
        component:Login,//路径对应的组件
        exact:true,//是否启用精准匹配
        isLogin:false,//是否需要做登录验证
        meta:{title:'登录'},//自定义设置路由元信息
    },
    {
        path:'/GoodsInfo/:id',//路径
        component:GoodsInfo,//路径对应的组件
        exact:true,//是否启用精准匹配
        isLogin:false,//是否需要做登录验证
        meta:{title:'商品详情'},//自定义设置路由元信息
    },
    // {
    //     path:'/home/cart',//路径
    //     component:Cart,//路径对应的组件
    //     exact:true,//是否启用精准匹配
    //     isLogin:true,//是否需要做登录验证
    //     meta:{title:'购物车'},//自定义设置路由元信息
    // },

    // 404
    {
        path: '*',//路径  设置动态路由 
        component: NotFound,//路径对应的组件
        exact: true,//是否启用精准匹配
        isLogin: false,//是否需要做登录验证
        meta: { title: '404页面' },//自定义设置路由元信息
    },
]





/**
 * 配置路由规则
*/
function RouterView() {
    return (
        <Switch>
            {routes.map(item => {
                // 判断里面是否component
                if (item.component) {
                    return <Route key={item.path} path={item.path} exact={item.exact}
                        render={() => {
                            // 1.为组件设置路由元信息
                            if (item.meta) document.title = item.meta.title
                            // 2.判断是否需要登录
                            if (item.isLogin) {
                                // 判断本地存储中是否存在用户信息
                                if (!sessionStorage.getItem('user')) {
                                    // 没有用户信息,则重定向
                                    return <Redirect to="/login"></Redirect>
                                }
                            }
                            // 不需要登录,则显示组件
                            const Component = withRouter(item.component);
                            return <Component></Component>
                        }}
                    ></Route>


                }
                // 里面没有component,则重定向 
                return <Redirect key={item.path} path={item.path} to={item.redirect} exact={item.exact}></Redirect>
            })}
        </Switch>
    )
}


export default RouterView